<template>
	<uni-popup ref="qiche_pop">
		<view class="qiche4s">
			<view class="title">
				汽车详情
			</view>
			<view class="qiche_content">
				<image class="black_1" :src="'/static/index/che/qiche_'+(item.car_info.shop.level)+'.png'">
				</image>
				<view class="name">{{item.car_info.shop.name}}</view>
				<view class="black_2">
					<view class="views">
						<view class="text1">出租时长：{{item.car_info.shop.use_hour}}h</view>
						<view class="text1">收益：{{item.car_info.shop.day_income}}U</view>
						<view class="text1">油耗：{{item.car_info.shop.consume_num}}L</view>
					</view>

				</view>

				<view class="black_3">
					<view class="left" @click="jiashu()">加速</view>
					<view class="right">出租时间
						<uni-countdown color="#fff" splitorColor="#fff" :showColon="true" :showDay="false"
							:show-hour="true" :showSecond="false" :timestamp="item.car_info.end_time" />
					</view>
				</view>
			</view>
		</view>
		<view style="height: 20px;"></view>
		<view class="bottom">
			<image class="close" @click="close" src="/static/my/close2.png"></image>
		</view>
		<pay ref="paySuccess"></pay>
	</uni-popup>
</template>

<script>
	import pay from '@/components/pay/pay.vue'
	export default {
		props: {
			success: {
				type: Function,
			}
		},
		components: {
			pay
		},
		name: "qiche",
		data() {
			return {
				current: 0,
				item: {
					"id": 0,
					"name": "",
					"price": "",
					"is_auth_give": false,
					"is_open_garage": false,
					"max_speed_up_num": 0,
					"car_info": {
						"id": 0,
						"garage_id": 0,
						"shop_id": 0,
						"end_time": 0,
						"is_hire": false,
						"shop": {
							"id": 0,
							"name": "",
							"level": "0",
							"day_income": "0.00",
							"use_hour": 0,
							"consume_num": 0
						}
					}
				}
			};
		},
		methods: {
			open(item) {
				this.item = item
				console.log(this.item)
				this.$refs.qiche_pop.open()
			},
			close() {
				this.$refs.qiche_pop.close()
			},
			toqiche() {
				this.$refs.pay.open()
			},
			jiashu() {
				this.success(this.item.car_info.id,this.item.max_speed_up_num)
				this.close()
			}
		}
	}
</script>

<style scoped lang="less">
	.qiche4s {
		background: linear-gradient(295deg, #D2823A 0%, #EF9164 100%);
		border-radius: 10px;
		padding: 2px;
		text-align: center;
		width: 650rpx;

		.qiche_content {
			background-color: #F9F3E5;
			border-radius: 10px;
		}

		.name {
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 3px;
			width: 120px;
			margin: auto;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #00000088 49%, rgba(0, 0, 0, 0) 100%);
		}

		.title {
			text-align: center;
			font-size: 49rpx;
			font-weight: 800;
			color: #FFFFFF;
			padding: 5px;
		}

		.black_1 {
			width: 180px;
			height: 130px;
			margin: 25px 10px 0px 10px;
		}


		.black_2 {
			margin-top: 10px;
			font-size: 26rpx;
			font-weight: bold;
			color: #242424;
			display: flex;
			text-align: start;

			.views {
				margin: auto;
			}

			.text1 {
				margin-top: 10px;
			}
		}

		.black_3 {
			padding: 35px 10px 40px 10px;
			display: flex;
			justify-content: space-between;

			.left {
				flex: 1;
				border-radius: 18rpx;
				border: 2px solid #FE903D;
				font-size: 30rpx;
				font-weight: bold;
				color: #FE903D;
				padding: 10px 5px;
				margin-right: 20px;
			}

			.right {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				background: #FE903D;
				border-radius: 18rpx;
				padding: 10px 5px;
				display: flex;
			}
		}
	}

	.bottom {
		text-align: center;
	}

	.close {
		text-align: center;
		margin: auto;
		width: 30px;
		height: 30px;
	}
</style>